{% extends 'base.html' %}

{% block title %}书籍列表 - 图书馆管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-search me-2"></i>搜索筛选
                </h5>
            </div>
            <div class="card-body">
                <form method="get">
                    {% for field in search_form %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                        {{ field }}
                        {% if field.help_text %}
                        <div class="form-text">{{ field.help_text }}</div>
                        {% endif %}
                        {% if field.errors %}
                        <div class="text-danger">
                            {% for error in field.errors %}
                            <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-1"></i>搜索
                    </button>
                </form>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-tags me-2"></i>分类导航
                </h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    <a href="{% url 'books:book_list' %}" class="list-group-item list-group-item-action">
                        全部书籍
                    </a>
                    {% for category in categories %}
                    <a href="{% url 'books:category_books' category.id %}" class="list-group-item list-group-item-action">
                        {{ category.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>
                <i class="fas fa-books me-2"></i>书籍列表
            </h2>
            <div class="text-muted">
                共找到 {{ page_obj.paginator.count }} 本书籍
            </div>
        </div>

        {% if page_obj %}
        <div class="row">
            {% for book in page_obj %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card book-card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ book.title }}</h5>
                        <p class="card-text text-muted">
                            <i class="fas fa-user me-1"></i>{{ book.author }}
                        </p>
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="fas fa-barcode me-1"></i>ISBN: {{ book.isbn }}
                            </small>
                        </p>
                        <p class="card-text">
                            <span class="badge bg-secondary">{{ book.category.name }}</span>
                            <span class="badge status-{{ book.status }}">
                                {% if book.status == 'available' %}
                                <i class="fas fa-check me-1"></i>可借阅
                                {% elif book.status == 'borrowed' %}
                                <i class="fas fa-times me-1"></i>已借出
                                {% elif book.status == 'reserved' %}
                                <i class="fas fa-clock me-1"></i>已预约
                                {% else %}
                                <i class="fas fa-tools me-1"></i>维护中
                                {% endif %}
                            </span>
                        </p>
                        <p class="card-text">
                            <small class="text-muted">
                                <i class="fas fa-copy me-1"></i>可借: {{ book.available_copies }}/{{ book.total_copies }}
                            </small>
                        </p>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'books:book_detail' book.id %}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-1"></i>详情
                            </a>
                            {% if user.is_authenticated %}
                                {% if book.available_copies > 0 %}
                                <a href="{% url 'books:borrow_book' book.id %}" class="btn btn-success btn-sm">
                                    <i class="fas fa-hand-holding me-1"></i>借阅
                                </a>
                                {% else %}
                                <a href="{% url 'books:reserve_book' book.id %}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-clock me-1"></i>预约
                                </a>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="书籍分页">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无书籍</h4>
            <p class="text-muted">当前没有找到符合条件的书籍</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %} 